<template>
	<view class="review">
		<NavBar title="评价用户"/>
		<view class="content">
			<view class="man-review">
				<view class="review-title"> 评价用户 </view>
				<view class="review-mark">
					<view class="label"> 您的打分 </view>
					<view class="value"> 
						<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
						<view class="rate"> {{star==1?'差':star==2?'一般':star==3?'好':star==4?'很好':'超棒'}} </view>
					</view>
				</view>
				<view class="review-content">
					<textarea v-model="text" placeholder="请输入您的评价" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="review-btn" @tap="submit"> 立即评价 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { EvaUserApi } from '@/service/rider.js'
	import { ShopEvaUserApi } from '@/service/shop.js'
	const star = ref(3)
	const text = ref('')
	const orderID = ref()
	const evaType = ref()
	const onChange = (e) => {
		console.log(e.value);
		star.value = e.value
	}
	const submit = () => {
		const params = {
			order_id: orderID.value,
			shop: [
				{
					star: star.value,
					detail: text.value
				}
			]
		}
		if(evaType.value =='shop') {
			ShopEvaUserApi(params).then(res => {
				getApp().globalData.toast('评价成功')
				uni.redirectTo({
					url: '/pages/shopPages/orderManage/orderManage'
				})
			})
		} else {
			EvaUserApi(params).then(res => {
				getApp().globalData.toast('评价成功')
				uni.redirectTo({
					url: '/pages/riderPages/riderComplete/riderComplete'
				})
			})
		}
	}
	onLoad((e) => {
		const { order_id, type } = e
		console.log(order_id, type, 'ppppppppp');
		orderID.value = order_id
		evaType.value = type
	})
</script>

<style lang="scss" scoped>
	.review {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.shop-review, .man-review {
			padding: 15px 12px;
			border-radius: 10px;
			background-color: #fff;
			.review-title {
				font-weight: 500;
				font-size: 16px;
				color: #333333;
				line-height: 20px;
			}
			.review-mark {
				display: flex;
				align-items: center;
				height: 50px;
				margin-top: 5px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.label {
					font-weight: 400;
					font-size: 16px;
					color: #333333;
				}
				.value {
					font-weight: 400;
					font-size: 14px;
					color: #999999;
					display: flex;
					align-items: center;
					margin-left: 20px;
					.rate {
						margin-left: 14px;
					}
				}
			}
			.review-content {
				padding-top: 15px;
				textarea {
					width: 100%;
					height: 100px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.review-btn {
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			margin-top: 20px;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>
